<template>
	<view class="border-top border-light-secondary p-3">
		<view class="rounded py-4 flex flex-column align-center justify-center bg-main">
			<text class="text-white font-sm mb-2">当前金币</text>
			<text class="text-white font-weight-bold" style="font-size: 60rpx;">50</text>
		</view>
		<view class="border-top border-light-secondary py-3"></view>
		<view class="">
			<text class="font-sm text-muted">请选择充值金额</text>
		</view>
		<view class="flex flex-wrap p-3" style="margin-left: -20rpx; margin-right: -20rpx;">
			<view v-for="(item,index) in list" :key="index" @click="choose(index)" class="p-2"
				style="width: 33.3%; box-sizing: border-box;">
				<view v-if="item.price > 0" class="border rounded flex flex-column align-center justify-center"
					style="height: 130rpx;" :class="activeIndex === index ? 'border-main' : ''">
					<view class="flex align-center">
						<text class="iconfont text-warning mr-1">&#xe633;</text>
						<text class="font font-weight-bold">{{item.coin}}</text>
					</view>
					<text class="font text-light-muted mt-1">￥{{item.price}}</text>
				</view>
				<view v-else class="border rounded flex flex-column align-center justify-center"
					style="height: 130rpx;">
					<text class="font text-light-muted">自定义</text>
				</view>
			</view>
		</view>
		<view
			class="position-fixed left-0 bottom-0 right-0 border-top flex px-3 align-center justify-between align-center"
			style="height: 100rpx;">
			<view class="flex align-center">
				<text class="iconfont text-warning mr-1">&#xe633;</text>
				<text class="font font-weight-bold">{{price}}</text>
			</view>
			<view class="bg-main rounded flex align-center justify-center" style="width: 150rpx;height: 70rpx;"
				@click="pay">
				<text class="text-white font-md">去充值</text>
			</view>

		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="自定义充值" placeholder="充值金额" v-model="price" inputType="number"
				:duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-ui/uni-popup/uni-popup-dialog.vue';
	export default {
		components: {
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				openId: "",
				activeIndex: 0,
				list: [{
					coin: 10,
					price: 10
				}, {
					coin: 20,
					price: 20
				}, {
					coin: 30,
					price: 30
				}, {
					coin: 50,
					price: 50
				}, {
					coin: 100,
					price: 100
				}, {
					coin: 0,
					price: 0
				}, ],
				price: 1,
				value: 0,
				orderInfo:{}
			}
		},
		methods: {
			getOpenId() {
				let that = this
				// 获取用户openId
				uni.login({
					provider: "weixin",
					success: function(res) {
						if (res.code) {
							//发起网络请求
							console.log(res);
							that.$H.post('/getOpenId', {
								code: res.code
							}, {
								token: true
							}).then(res => {
								that.openId = res.data.openid;
								console.log(that.openId);
								// that.getPayParams()
							})
						}
					}
				})
			},
			pay() {
				let that = this
				this.$H.post('/wechat/pay', {
					price:this.price
				}, {
					token: true
				}).then(orderInfo => {
					console.log(orderInfo);
					var data = orderInfo.data //订单信息
					var appid = String(data.appId)
					var timestamp = String(data.timeStamp)
					var pssr = String(data.package)
					var paysign = String(data.paySign)
					var prepayid = String(data.prepayid)
					var noncestr = String(data.nonceStr)
									uni.requestPayment({
										provider: "wxpay",
										appId: appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
										timeStamp: timestamp, // 时间戳（单位：秒）
										package: pssr, // 固定值
										paySign: paysign, //签名
										signType: 'MD5', // 签名算法，这里用的 MD5/RSA 签名
										nonceStr: noncestr, // 随机字符串
										success(res) {
											that.$store.dispatch('getUserInfo')
											uni.showToast({
												title: '充值成功',
												icon:'none'
											});
											console.log(res);
										},
										fail(err) {
											console.log(err);
											uni.showModal({
												title: '提示',
												content: '支付失败',
												showCancel: false,
												
											});
												}
											})
					
				}).catch(err => {
					console.log(err);
				})
			},
			choose(index) {
				this.activeIndex = index
				let p = this.list[index].price;
				if (p > 0) {
					this.price = p
				} else {
					// 自定义价格
					this.$refs.popup.open()
				}
			},
			close() {
				this.$refs.popup.close()
			},
			confirm(done, value) {
							console.log(value);
							if(!value){
								return uni.showToast({
									title: '请输入要充值的金额',
									icon: 'none'
								});
							}
							this.price = value
							done()
						}
		}
	}
</script>

<style>

</style>